{% extends "base.html" %}

{% block title %}个人中心{% endblock %}

{% block navbar %}
<section class="content-header">
    <h1>个人中心</h1>
    <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i> 当前位置</li>
        <li class="active">个人中心</li>
    </ol>
</section>
{% endblock %}

{% block content %}
<div class="box box-primary">
    <form method="post" enctype="multipart/form-data">
        {{form.hidden_tag()}}
        <div class="box-header with-border">
            {% include 'message.html' %}
        </div>

        <div class="box-body">
            <div class="col-md-12">
                <div class="form-group">
                    <label>{{form.enable.label}}</label>
                </div>
                <div class="form-group">
                    {{form.enable}}
                </div>
                <di style="display: none">
                    {{form.uid}}
                </di>
            </div>
            {% if form.enable.data %}
            <div class=" col-md-12">
                    <div class="form-group">
                        <label>{{form.otp_str.label}}</label>
                    </div>
                    <div id="qrimg" class="form-group">
                        <img class="qrcode" src="{{image_url}}" />
                    </div>
            </div>
            {% endif %}

        </div>
</div>

<div class="box-footer" style="display: none">
    <div class="col-md-6">
        {{form.submit(class_="btn btn-primary pull-left")}}
    </div>
</div>
</form>
</div>
{% endblock %}

{% block scripts %}
<script>
    function initPage() {
        slide_value = $(".slider").val() == "" ? 50 : parseInt($(".slider").val());
        $(".slider").slider({
            id: "blue",
            max: 100,
            value: slide_value
        });

        switch_value = $('#enable')[0].checked;
        $('#enable').bootstrapSwitch({
            state: switch_value,
            onText: '启用',
            offText: '停用'
        });

        // 状态变更
        $("#enable").on("switchChange.bootstrapSwitch", function (event, state) {
            // $.post("/my", data = {
            //     "id": $(this).attr("uid"),
            //     "state": state,
            // }, function (data) {
            //     var res = JSON.parse(data);
            //     if (res.result === 0) {
            //         var img = "<img src='" + res.data + "'/>"
            //         $("#qrimg").empty().append(img);
            //     }
            // })
            $(".btn-primary").click();
            // restTemplate("POST", "my", {
            //     "id": $(this).attr("uid"),
            //     "state": state,
            // }, function (data) {
            //     var res = JSON.parse(data);
            //     console.log(res);
            //     if (res.result === 0) {
            //         if (res.enable) {
            //             window.location.reload();
            //             $(".qrcode").attr("src", res.data);
            //             $(".qrcode-div").show();
            //         }
            //         else {
            //             $(".qrcode-div").hide();
            //         }
            //     }
            // })
        });

    }
</script>
{% endblock %}